<template>
  <div>
    <headerNav />
    <div class="mindWidth">
      <div class="bread_content">会员中心</div>
      <div class="mindWidth">
        <div class="Info_wrapper">
          <div class="userInfo_contentList">
            <div v-for="(item, index) in userInfoList" :key="index">
              <nuxt-link
                :to="item.path"
                class="userinfo_wrapper"
                :class="currentIndex === index ? 'nuxt-link-active' : ''"
              >{{ item.info }}</nuxt-link>
            </div>
          </div>
          <router-view class="live"></router-view>
        </div>
      </div>
      <navigation />
    </div>
    <footerNav />
  </div>
</template>

<script>
import userinfocentent from "./userInfocentent.vue";
export default {
  components: {
    userinfocentent
  },
  data() {
    return {
      currentIndex: "",
      userInfoList: [
        {
          info: "个人中心",
          path: "/VIP/userInfo"
        },
        {
          info: "我的关注",
          path: "/VIP/attention/enterprise"
        },
        {
          info: "我的企业",
          path: "/VIP/company"
        },
        {
          info: "我的订单",
          path: "/VIP/order"
        },
        {
          info: "谁看了我",
          path: "/VIP/discover"
        },
        {
          info: "分享统计",
          path: "/VIP/statistics"
        },
        {
          info: "我的消息",
          path: "/VIP/information"
        },
        {
          info: "浏览历史",
          path: "/VIP/viewHistory"
        },
        {
          info: "科技成果",
          path: "/VIP/publishResults"
        },
        {
          info: "成果需求",
          path: "/VIP/publishDemand"
        }
      ]
    };
  },
  mounted() {
    this.isLogin();
  },
  methods: {
    isLogin() {
      // 检测是否有登录
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.$confirm("您尚未登录,请马上登录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            this.$router.back();
          });
      }
    }
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler(val) {
        let index = this.userInfoList.findIndex(el => el.path == val.path);
        if (index != -1) {
          this.currentIndex = index;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.bread_content {
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
/* 个人中心页面 */
.Info_wrapper {
  width: 100%;
  display: flex;
  padding-bottom: 20px;
  // justify-content: space-between;
}
.userInfo_contentList {
  // width: 180px;
  width: 150px;
  a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #000;
    font-size: 16px;
    text-align: center;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
  }

  .nuxt-link-active {
    color: #44a2ff;
    background-color: #e8f3ff;
  }
}
.live {
  border-left: 1px solid #ccc;
  padding-left: 60px;
  // margin-left: 60px;
  width: 85%;
  margin-left: 20px;
}
</style>
